<template>
  <div class="alarm_container">
    <el-dialog title="告警" :visible.sync="isProgressShow">
      <el-form ref="dialogData" :model="dialogData" label-width="80px" style="display: flex;">
        <div style="width: 80%;padding: 0px 50px;">
          <el-form-item label="标题">
            <el-input v-model="this.dialogData.alarmTitle" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="详细内容">
            <el-input v-model="this.dialogData.alarmContent" type="textarea" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="发件人">
            <el-input v-model="this.dialogData.alarmSender" :disabled="true"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isProgressShow = false">取 消</el-button>
        <el-button type="primary" @click="isProgressShow = false">确 定</el-button>
      </div>
    </el-dialog>

    <div class="alarm_header_container">
      <div style="display: flex;width: 30%;">
        <div class="icon_container">
          <i class="el-icon-bell" style="font-size: x-large;"></i>
        </div>
        <div class="alarm_title">告警</div>
      </div>
      <div>
        <el-button plain size="small" style="margin-right: 50px;" @click="goBackPage">返回</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="alarm_table_container">
      <el-table :data="this.tableData" style="width:100%" max-height="800">
        <el-table-column prop="alarmTitle" label="标题" min-width="20%" align="center">
        </el-table-column>
        <el-table-column prop="alarmContent" label="详细内容" min-width="60%" align="center">
        </el-table-column>
        <el-table-column prop="alarmSender" label="发件人" min-width="10%" align="center">
        </el-table-column>
        <el-table-column prop="profit" label="操作" min-width="10%" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
        :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total" @size-change="handleSizeChange"
        @current-change="handlePageChange" style="padding-right: 30px;" />
    </div>
  </div>
</template>

<style scoped>
.alarm_container {
  margin: 0 auto;
  margin-top: 1%;
  width: 95%;
  height: 100%;
  justify-content: center;
  background-color: rgb(255, 255, 255);
}

.alarm_header_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8%;
}

.icon_container {
  margin-left: 50px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm_header {
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 10px;
  margin: 10px 0px auto;
  width: 80%;
}

.alarm_title {
  display: flex;
  font-size: x-large;
  justify-content: left;
  width: 50%;
}

.alarm_content_select {
  margin: 0 70px;
  width: 30%;
}

.alarm_content_select_item {
  width: 99%;
}

.el-divider--horizontal {
  margin: 2px auto;
  height: 2px;
}

.alarm_table_container {
  width: 90%;
  margin: 0 auto;
}

.pagination {
  width: 100%;
  margin: 25px auto;
  /* text-align: right; */
}
</style>

<script>
import { getAlarmList } from '../../api/homeData';
export default {
  data() {
    return {
      tableData: [],
      //分页相关数据
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 8, // 每页多少条
        total: 0 // 总记录数
      },
      dialogData: {
        // 用于弹窗展示信息
        alarmTitle: null,
        alarmContent: null,
        alarmSender: null,
      },
      BasicDataPage: null,
      pageSizes: [4, 8],
      isProgressShow: false,
    }
  },
  computed: {
    userId() {
      return localStorage.getItem("userId");
    },
  },
  methods: {
    handleClick(row) {
      this.dialogData.alarmTitle = row.alarmTitle;
      this.dialogData.alarmContent = row.alarmContent;
      this.dialogData.alarmSender = row.alarmSender;
      this.isProgressShow = true;
    },
    // 分页
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
      this.BasicDataPage = this.getList(this.tableData, this.tablePage.pageNum, this.tablePage.pageSize)
    },
    getList(data, num, size) {
      let list, start, end
      start = (num - 1) * size
      end = start + size
      list = data.filter((item, index) => {
        return index >= start && index < end
      })
      list.forEach((item, index) => {
        item.seq = index + start
      })
      return list
    },
    getPageList(data, num, size) {
      this.tablePage.total = data.length
      this.BasicDataPage = this.getList(data, num, size)
      return this.BasicDataPage
    },
    initTableData() {
      getAlarmList(this.userId).then(res => {
        this.tableData = res.data.data;
      })
    },
    goBackPage() {
      this.$router.go('-1');
    },
  },
  mounted() {
    this.initTableData();
  }
}
</script>
